import React from 'react';
import './toplist.less';
import API from '../../../api/index';
import utils from '../../../utils/utils'
class TopList extends React.Component {

    state = {
        toplistAll: [
            {
                coverImgUrl: '',
                id: '',
                name: '',
                list: []
            }, {
                coverImgUrl: '',
                id: '',
                name: '',
                list: []
            }, {
                coverImgUrl: '',
                id: '',
                name: '',
                list: []
            }
        ],

        topOne: [],
        topTwo: [],
        topThree: []

    }
    render() {
        return <div className='toplist_box'>

            <div className="navitem clearfix">
                <h2><a href="#">榜单</a></h2>
                <span><a href="#">更多</a></span>
            </div>
            <div className="listbox">
                {
                    this.state.toplistAll.map(
                        (item, index) => {
                           // utils.sleep(10000);
                            return <div className="toplist" key={index}>
                                <div className="toptitle">
                                    <img src={item.coverImgUrl} alt="" />
                                    <a href="#" className="topimgbg"></a>
                                    <div className="toptitle-right">
                                        <p><a href="#">{item.name}</a></p>
                                        <div>
                                            <span className="playbtn"></span>
                                            <span className="collectbtn"></span>
                                        </div>
                                    </div>
                                </div>
                               {/*  <ul className="topul">
                                    {
                                        item.list.map(
                                            (info, number) => {
                                                return <li key={number}>
                                                    <span>{number + 1}</span>
                                                    <a href="#" className="title">{info.name}</a>
                                                    <p>
                                                        <span className="playli"></span>
                                                        <span className="addli"></span>
                                                        <span className="collli"></span>
                                                    </p>
                                                </li>
                                            }
                                        )
                                    }
                                    <li>
                                        <div className="more"><a href="#">查看更多&gt;</a></div>
                                    </li>
                                </ul> */}
                                {/* <ul className="topul">
                                    {
                                        item.list.map(
                                            (info, number) => {
                                                return <li key={number}>
                                                    <span>{number + 1}</span>
                                                    <a href="#" className="title">{info.name}</a>
                                                    <p>
                                                        <span className="playli"></span>
                                                        <span className="addli"></span>
                                                        <span className="collli"></span>
                                                    </p>
                                                </li>
                                            }
                                        )
                                    }
                                    <li>
                                        <div className="more"><a href="#">查看更多&gt;</a></div>
                                    </li>
                                </ul> */}
                            </div>
                        }
                    )
                }
                {/* 
                <div className="toplist">
                    <div className="toptitle">
                        <img src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100" alt="" />
                        <a href="#" className="topimgbg"></a>
                        <div className="toptitle-right">
                            <p><a href="#">云音乐飙升榜</a></p>
                            <div>
                                <span className="playbtn"></span>
                                <span className="collectbtn"></span>
                            </div>
                        </div>
                    </div>
                    <ul className="topul">
                        {
                            this.state.topTwo.map(
                                (item, index) => {
                                    return <li key={index}>
                                        <span>{index + 1}</span>
                                        <a href="#" className="title">{item.name}</a>
                                        <p>
                                            <span className="playli"></span>
                                            <span className="addli"></span>
                                            <span className="collli"></span>
                                        </p>
                                    </li>
                                }
                            )
                        }
                        <li>
                            <div className="more"><a href="#">查看更多&gt;</a></div>
                        </li>
                    </ul>
                </div>

                <div className="toplist">
                    <div className="toptitle">
                        <img src="http://p3.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100" alt="" />
                        <a href="#" className="topimgbg"></a>
                        <div className="toptitle-right">
                            <p><a href="#">云音乐飙升榜</a></p>
                            <div>
                                <span className="playbtn"></span>
                                <span className="collectbtn"></span>
                            </div>
                        </div>
                    </div>
                    <ul className="topul">
                        {
                            this.state.topThree.map(
                                (item, index) => {
                                    return <li key={index}>
                                        <span>{index + 1}</span>
                                        <a href="#" className="title">{item.name}</a>
                                        <p>
                                            <span className="playli"></span>
                                            <span className="addli"></span>
                                            <span className="collli"></span>
                                        </p>
                                    </li>
                                }
                            )
                        }
                        <li>
                            <div className="more"><a href="#">查看更多&gt;</a></div>
                        </li>
                    </ul>
                </div>

                 */}
            </div>
        </div>;
    };

    async componentWillMount() {
        //榜单摘要
        await API.myIndex.topListSmall().then(data => {
            let result = data.list.slice(0, 3);
            console.log(result)
            this.setState({
                toplistAll: result.map(item => {
                    let toplistAllObj = {
                        id: item.id,
                        name: item.name,
                        coverImgUrl: item.coverImgUrl,
                    }
                    return toplistAllObj;
                })
            })
            console.log(this.state.toplistAll)
        });

        this.state.toplistAll.forEach(item => {
            //utils.sleep(10000);
            API.myIndex.topList(item.id).then(data => {
                let result = data.playlist.tracks.slice(0, 10);
                item.list = result.map(item=>{
                    let listObj = {
                        id:item.al.id,
                        name:item.al.name
                    }
                    return listObj;
                })
               // item.list = data.playlist.tracks.slice(0, 10);
            })
        })

        // await API.myIndex.topList(19723756).then(data => {
        //     let result =  data.playlist.tracks.slice(0, 10);
        // console.log(result);
        // })
        //飙升榜
        /* await API.myIndex.topList1().then(data => {
            let result = data.playlist.tracks.slice(0, 10);
            console.log(result)
            this.setState({
                topOne: result.map(item => {
                    let topOneObj = {
                        id: item.id,
                        name: item.al.name,
                    }
                    return topOneObj;
                }),

            })

        }); */
        //新歌榜
        /* await API.myIndex.topList2().then(data => {
            let result = data.playlist.tracks.slice(0, 10);
            console.log(result)
            this.setState({
                topTwo: result.map(item => {
                    let topTwoObj = {
                        id: item.id,
                        name: item.al.name,

                    }
                    return topTwoObj;
                })
            })
        }); */
        //原创榜
        // await API.myIndex.topList3().then(data => {
        //     let result = data.playlist.tracks.slice(0, 10);
        //     console.log(result)
        //     this.setState({
        //         topThree: result.map(item => {
        //             let topThreeObj = {
        //                 id: item.id,
        //                 name: item.al.name,
        //             }
        //             return topThreeObj;
        //         })
        //     })
        //     /* const songTip = this.state.toplistAll.slice();
        //     console.log(songTip);
        //     console.log(this.state.topOne);
        //     songTip[0]= [...this.state.toplistAll,this.state.topOne];
        //     songTip[0]= [...this.state.toplistAll,this.state.topOne];
        //     this.setState({
        //         toplistAll: songTip
        //     })
        //     console.log(this.state.toplistAll); */
        // });
    };
}
export default TopList